<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>尺寸的问题</title>
		<style>
			/* 1+100  取值：选择器被选中几率增加 */
			di v#d1{
				width: 50%;
				height: 500px;
				/* 颜色色值：透明度，遮罩层，左栏 */
				background: rgba(220, 66, 166, .1);
			}
			div#container{
				background: #ff0000;
			}
			div.box{
				background: #ffaaff;
				color: #fff;
				width: 80%;
				/* 最小宽度：设定，不能改变，移动端 */
				min-width: 500px;
				/* 最大宽度，设定，宽度最大上限600px，移动端 */
				max-width: 600px;
				/* 页面设定最大与最小宽高  约定  移动端宽高比。页面错乱 */
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<!-- 最大宽度与最小宽度：
		自适应：编写页面在任何浏览器下正常显示 -->
		<div id="container">
			<div class="box">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui a neque velit, voluptas dolorem ducimus pariatur enim corporis beatae commodi veniam, ab deleniti temporibus eveniet quos laboriosam culpa! Voluptatum, accusamus?</div>
		</div>
	</body>
</html>